<template>
  <SettingItemBox name="配置文件">
    <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
      <template #icon>
        <n-icon>
          <pencil-icon />
        </n-icon>
      </template>
      编辑
    </n-button>
  </SettingItemBox>
  <!-- 弹窗 -->
  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
      <template #header>
        <n-space>
          <n-text>配置文件编辑器</n-text>
        </n-space>
      </template>

      <template #header-extra> </template>
      <!-- <n-layout has-sider sider-placement="right"> -->
      <n-layout style="height: 580px; padding-right: 20px">
        <monaco-editor
          v-model="optionMap"
          language="json"
          :editorOptions="{
            lineNumbers: 'on',
            minimap: { enabled: true }
          }"
        />
      </n-layout>

      <template #action>
        <n-space justify="space-between">
          <n-space>
            <n-button size="medium" @click="closeEvents">取消</n-button>
            <n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
          </n-space>
        </n-space>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import { GlobalThemeJsonType } from '@/settings/chartThemes'
import { SettingItemBox } from '@/components/Pages/ChartItemSetting'
import { PropType, computed, watch, ref } from 'vue'
import { setSessionStorage, JSONStringify, JSONParse, setTitle, goDialog } from '@/utils'
import { MonacoEditor } from '@/components/Pages/MonacoEditor'
import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const chartEditStore = useChartEditStore()
const props = defineProps({

    optionData: {
    type: Object as PropType<GlobalThemeJsonType>,
    required: true
  },
})
// 受控弹窗
const showModal = ref(false)
// 关闭事件
const closeEvents = () => {
  showModal.value = false
}
const optionMap = ref('')

// 新增事件
const saveEvents = () => {
  const { targetData, chartEditStore } = useTargetData()
  targetData.value.option = JSON.parse(optionMap.value)
  closeEvents()
}
watch(
  () => props.optionData,
  (val: any) => {
    let data = JSONStringify(val)

    optionMap.value = data
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
